<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑角色' : '新增角色'"
    width="800px"
    :before-close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="角色名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入角色名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色代码" prop="code">
            <el-input
              v-model="form.code"
              placeholder="请输入角色代码"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <!-- <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input-number
              v-model="form.sort"
              :min="0"
              :max="999"
              placeholder="请输入排序"
              style="width: 100%"
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label="角色描述" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          :rows="3"
          placeholder="请输入角色描述"
        />
      </el-form-item>
      
      <el-form-item label="权限配置" prop="permission_ids" class="permission-transfer-item">
        <div class="permission-transfer-container">
          <!-- 可分配权限 -->
          <div class="transfer-panel-wrapper">
            <div class="transfer-panel-title">
              <span>可分配权限</span>
              <el-checkbox
                v-model="availableSelectAll"
                :indeterminate="availableIndeterminate"
                @change="handleAvailableSelectAll"
                class="select-all-checkbox"
              >
                全选
              </el-checkbox>
            </div>
            <div class="transfer-panel">
              <el-input
                v-model="availableSearchText"
                placeholder="搜索权限"
                class="transfer-filter"
                clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <div class="transfer-list">
                <el-checkbox-group v-model="selectedAvailable" class="permission-checkbox-group">
                  <div
                    v-for="item in filteredAvailablePermissions"
                    :key="item.id"
                    class="permission-item"
                    :class="{ 'is-child': item.level > 0 }"
                  >
                    <div class="permission-content">
                      <el-checkbox :label="item.id" :disabled="item.disabled" class="permission-checkbox">
                        <span class="permission-name" :class="`level-${item.level}`" :title="item.fullPath">{{ item.name }}</span>
                        <span class="permission-path" :class="`level-${item.level}-path`">{{ item.fullPath }}</span>
                      </el-checkbox>

                      <!-- 父级权限的全选子级按钮 -->
                      <el-button
                        v-if="hasChildren(item.id)"
                        size="small"
                        type="text"
                        class="select-children-btn"
                        @click.stop="toggleSelectChildren(item.id, 'available')"
                        :title="areAllChildrenAndSelfSelected(item.id, selectedAvailable) ? '取消选择父级和所有子级' : '选择父级和所有子级'"
                      >
                        <el-icon>
                          <RemoveFilled v-if="areAllChildrenAndSelfSelected(item.id, selectedAvailable)" />
                          <CirclePlusFilled v-else />
                        </el-icon>
                      </el-button>
                    </div>
                  </div>
                </el-checkbox-group>
              </div>
              <div class="transfer-footer">
                <span class="transfer-count">{{ filteredAvailablePermissions.length }} 项</span>
                <el-button
                  type="primary"
                  size="small"
                  :disabled="selectedAvailable.length === 0"
                  @click="moveToAssigned"
                >
                  分配 →
                </el-button>
              </div>
            </div>
          </div>

          <!-- 已分配权限 -->
          <div class="transfer-panel-wrapper">
            <div class="transfer-panel-title">
              <span>已分配权限</span>
              <el-checkbox
                v-model="assignedSelectAll"
                :indeterminate="assignedIndeterminate"
                @change="handleAssignedSelectAll"
                class="select-all-checkbox"
              >
                全选
              </el-checkbox>
            </div>
            <div class="transfer-panel">
              <el-input
                v-model="assignedSearchText"
                placeholder="搜索权限"
                class="transfer-filter"
                clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <div class="transfer-list">
                <div class="permission-checkbox-group">
                  <div
                    v-for="item in filteredAssignedPermissions"
                    :key="item.id"
                    class="permission-item"
                    :class="{ 'is-child': item.level > 0 }"
                  >
                    <div class="permission-content">
                      <!-- 批量操作选择框（只修改选中状态，用于批量移除） -->
                      <el-checkbox
                        :model-value="selectedAssigned.includes(item.id)"
                        @change="(checked) => handleAssignedSelectionChange(item.id, checked)"
                        class="permission-checkbox"
                      >
                        <span class="permission-name" :class="`level-${item.level}`" :title="item.fullPath">{{ item.name }}</span>
                        <span class="permission-path" :class="`level-${item.level}-path`">{{ item.fullPath }}</span>
                      </el-checkbox>

                      <!-- 父级权限的全选子级按钮 -->
                      <el-button
                        v-if="hasChildren(item.id)"
                        size="small"
                        type="text"
                        class="select-children-btn"
                        @click.stop="toggleSelectChildren(item.id, 'assigned')"
                        :title="areAllChildrenAndSelfSelected(item.id, selectedAssigned) ? '取消选择父级和所有子级' : '选择父级和所有子级'"
                      >
                        <el-icon>
                          <RemoveFilled v-if="areAllChildrenAndSelfSelected(item.id, selectedAssigned)" />
                          <CirclePlusFilled v-else />
                        </el-icon>
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="transfer-footer">
                <span class="transfer-count">{{ filteredAssignedPermissions.length }} 项</span>
                <el-button
                  type="danger"
                  size="small"
                  :disabled="selectedAssigned.length === 0"
                  @click="moveToAvailable"
                >
                  ← 移除
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="handleSubmit"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, watch, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
import { createRole, updateRole } from './api'
import { getUserPermissionTree } from '../permission/api'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    default: null
  }
})

// Emits
const emit = defineEmits(['update:visible', 'success'])

// 响应式数据
const formRef = ref()
const loading = ref(false)
const permissionList = ref([])
const permissionTree = ref([]) // 保存原始树形数据
const permissionMap = ref(new Map()) // 权限ID到权限对象的映射

// 自定义穿梭框相关数据
const availableSearchText = ref('')
const assignedSearchText = ref('')
const selectedAvailable = ref([])
const selectedAssigned = ref([])

// 全选相关状态
const availableSelectAll = ref(false)
const assignedSelectAll = ref(false)

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const isEdit = computed(() => Boolean(props.formData?.id))

// 计算属性：可分配权限（未选中的权限）
const filteredAvailablePermissions = computed(() => {
  const available = permissionList.value.filter(item => !form.permission_ids.includes(item.id))
  if (!availableSearchText.value) {
    return available
  }
  const searchText = availableSearchText.value.toLowerCase()
  return available.filter(item =>
    item.name.toLowerCase().includes(searchText) ||
    item.fullPath.toLowerCase().includes(searchText)
  )
})

// 计算属性：已分配权限（已选中的权限）
const filteredAssignedPermissions = computed(() => {
  const assigned = permissionList.value.filter(item => form.permission_ids.includes(item.id))
  if (!assignedSearchText.value) {
    return assigned
  }
  const searchText = assignedSearchText.value.toLowerCase()
  return assigned.filter(item =>
    item.name.toLowerCase().includes(searchText) ||
    item.fullPath.toLowerCase().includes(searchText)
  )
})

// 计算属性：可分配权限全选状态
const availableIndeterminate = computed(() => {
  const availableCount = filteredAvailablePermissions.value.length
  const selectedCount = selectedAvailable.value.length
  return selectedCount > 0 && selectedCount < availableCount
})

// 计算属性：已分配权限全选状态
const assignedIndeterminate = computed(() => {
  const assignedCount = filteredAssignedPermissions.value.length
  const selectedCount = selectedAssigned.value.length
  return selectedCount > 0 && selectedCount < assignedCount
})

// 表单数据
const form = reactive({
  name: '',
  code: '',
  description: '',
  sort: 0,
  status: 1,
  permission_ids: []
})

// 穿梭框数据处理
const flattenPermissions = (permissions) => {
  const result = []
  const map = new Map()

  // 构建完整路径的辅助函数
  const buildFullPath = (item, parentPath = '') => {
    return parentPath ? `${parentPath} > ${item.name}` : item.name
  }

  const flatten = (items, level = 0, parentId = null, parentPath = '') => {
    items.forEach(item => {
      // 构建完整的层级路径
      const fullPath = buildFullPath(item, parentPath)

      let displayName = item.name
      if (level > 0) {
        // 为子级权限添加缩进和层级标识，同时显示完整路径
        const indent = '　'.repeat(level) // 使用全角空格缩进
        displayName = `${indent}├─ ${item.name}`
      }

      const permissionData = {
        id: item.id,
        name: displayName,
        fullPath: fullPath, // 保存完整路径用于搜索和显示
        disabled: false,
        parentId: parentId,
        children: [],
        level: level
      }

      result.push(permissionData)
      map.set(item.id, permissionData)

      // 如果有父级，将当前项添加到父级的children中
      if (parentId && map.has(parentId)) {
        map.get(parentId).children.push(item.id)
      }

      if (item.children && item.children.length > 0) {
        flatten(item.children, level + 1, item.id, fullPath)
      }
    })
  }

  flatten(permissions)
  permissionMap.value = map
  permissionTree.value = permissions
  return result
}

// 表单验证规则
const rules = reactive({
  name: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 2, max: 50, message: '角色名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入角色代码', trigger: 'blur' },
    { min: 2, max: 50, message: '角色代码长度在 2 到 50 个字符', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_]+$/, message: '角色代码只能包含字母、数字和下划线', trigger: 'blur' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
})

// 可分配权限全选处理
const handleAvailableSelectAll = (checked) => {
  if (checked) {
    selectedAvailable.value = filteredAvailablePermissions.value.map(item => item.id)
  } else {
    selectedAvailable.value = []
  }
}

// 已分配权限全选处理
const handleAssignedSelectAll = (checked) => {
  if (checked) {
    selectedAssigned.value = filteredAssignedPermissions.value.map(item => item.id)
  } else {
    selectedAssigned.value = []
  }
}

// 重置表单
const resetForm = () => {
  Object.keys(form).forEach(key => {
    if (key === 'status') {
      form[key] = 1
    } else if (key === 'sort') {
      form[key] = 0
    } else if (key === 'permission_ids') {
      form[key] = []
    } else {
      form[key] = ''
    }
  })

  // 重置穿梭框相关状态
  availableSearchText.value = ''
  assignedSearchText.value = ''
  selectedAvailable.value = []
  selectedAssigned.value = []
  availableSelectAll.value = false
  assignedSelectAll.value = false

  nextTick(() => {
    formRef.value?.clearValidate()
  })
}

// 检查权限是否有子级
const hasChildren = (permissionId) => {
  const permission = permissionMap.value.get(permissionId)
  return permission && permission.children && permission.children.length > 0
}

// 获取权限的所有子级ID（递归）
const getAllChildrenIds = (permissionId) => {
  const children = []
  const permission = permissionMap.value.get(permissionId)
  if (permission && permission.children) {
    permission.children.forEach(childId => {
      children.push(childId)
      children.push(...getAllChildrenIds(childId))
    })
  }
  return children
}



// 检查父级本身和所有子级是否都被选中（在选择状态中）
const areAllChildrenAndSelfSelected = (permissionId, selectedList) => {
  const childrenIds = getAllChildrenIds(permissionId)
  const allIds = [permissionId, ...childrenIds]
  return allIds.every(id => selectedList.includes(id))
}



// 切换选择子级权限（包含父级本身）
const toggleSelectChildren = (permissionId, type) => {
  const childrenIds = getAllChildrenIds(permissionId)
  // 包含父级本身和所有子级
  const allIds = [permissionId, ...childrenIds]

  if (type === 'available') {
    // 在可分配权限区域 - 修改选择状态
    const allSelected = allIds.every(id => selectedAvailable.value.includes(id))

    if (allSelected) {
      // 取消选择父级和所有子级
      selectedAvailable.value = selectedAvailable.value.filter(id => !allIds.includes(id))
    } else {
      // 选择父级和所有子级（只选择在可分配列表中的）
      const availableIds = allIds.filter(id =>
        filteredAvailablePermissions.value.some(item => item.id === id)
      )
      const newSelected = [...new Set([...selectedAvailable.value, ...availableIds])]
      selectedAvailable.value = newSelected
    }
  } else if (type === 'assigned') {
    // 在已分配权限区域 - 修改选中状态（用于批量移除）
    const allSelected = allIds.every(id => selectedAssigned.value.includes(id))

    if (allSelected) {
      // 取消选中父级和所有子级
      selectedAssigned.value = selectedAssigned.value.filter(id => !allIds.includes(id))
    } else {
      // 选中父级和所有子级（只选中在已分配列表中的）
      const assignedIds = allIds.filter(id =>
        filteredAssignedPermissions.value.some(item => item.id === id)
      )
      const newSelected = [...new Set([...selectedAssigned.value, ...assignedIds])]
      selectedAssigned.value = newSelected
    }
  }
}

// 获取权限列表（基于当前用户权限）
const fetchPermissions = async () => {
  try {
    const response = await getUserPermissionTree()
    const treeData = response.data || []
    // 将树形数据扁平化为穿梭框数据
    permissionList.value = flattenPermissions(treeData)
  } catch (error) {
    console.error('获取权限列表失败:', error)
    // 如果权限接口还没实现，使用模拟数据
    const mockTreeData = [
      {
        id: 1,
        name: '仪表板',
        children: []
      },
      {
        id: 2,
        name: '系统管理',
        children: [
          { id: 3, name: '用户管理' },
          { id: 8, name: '角色管理' },
          { id: 13, name: '权限管理' }
        ]
      }
    ]
    // 将模拟树形数据扁平化为穿梭框数据
    permissionList.value = flattenPermissions(mockTreeData)
  }
}





// 已分配权限批量选择处理（用于批量移除操作）
const handleAssignedSelectionChange = (permissionId, checked) => {
  if (checked) {
    if (!selectedAssigned.value.includes(permissionId)) {
      selectedAssigned.value.push(permissionId)
    }
  } else {
    selectedAssigned.value = selectedAssigned.value.filter(id => id !== permissionId)
  }
}

// 监听表单数据变化
watch(
  () => props.formData,
  (newData) => {
    if (newData) {
      // 编辑模式，填充表单数据
      Object.keys(form).forEach(key => {
        if (key === 'permission_ids') {
          // 处理权限数据
          const permissionIds = newData.permissions ? newData.permissions.map(p => p.id) : []
          form[key] = permissionIds
        } else {
          // 正确处理数字类型的字段，避免 0 被当作 falsy 值
          if (newData[key] !== undefined && newData[key] !== null) {
            form[key] = newData[key]
          } else {
            // 设置默认值
            if (key === 'status') {
              form[key] = 1
            } else if (key === 'sort') {
              form[key] = 0
            } else {
              form[key] = ''
            }
          }
        }
      })
    } else {
      // 新增模式，重置表单
      resetForm()
    }
  },
  { immediate: true }
)

// 移动到已分配权限
const moveToAssigned = () => {
  if (selectedAvailable.value.length === 0) return

  const newSelectedIds = new Set([...form.permission_ids, ...selectedAvailable.value])

  // 自动选中父级权限
  selectedAvailable.value.forEach(id => {
    let currentId = id
    while (currentId) {
      const permission = permissionMap.value.get(currentId)
      if (permission && permission.parentId) {
        newSelectedIds.add(permission.parentId)
        currentId = permission.parentId
      } else {
        break
      }
    }
  })

  form.permission_ids = Array.from(newSelectedIds)
  selectedAvailable.value = []
}

// 移动到可分配权限
const moveToAvailable = () => {
  if (selectedAssigned.value.length === 0) return

  const newSelectedIds = new Set(form.permission_ids)

  // 移除选中的权限及其子级权限
  selectedAssigned.value.forEach(id => {
    newSelectedIds.delete(id)
    // 递归移除所有子级权限
    const removeChildren = (permissionId) => {
      const permission = permissionMap.value.get(permissionId)
      if (permission && permission.children) {
        permission.children.forEach(childId => {
          newSelectedIds.delete(childId)
          removeChildren(childId)
        })
      }
    }
    removeChildren(id)
  })

  form.permission_ids = Array.from(newSelectedIds)
  selectedAssigned.value = []
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    loading.value = true

    // 穿梭框的选中数据已经绑定到 form.permission_ids
    const submitData = {
      ...form
    }

    if (isEdit.value) {
      await updateRole(props.formData.id, submitData)
      ElMessage.success('更新角色成功')
    } else {
      await createRole(submitData)
      ElMessage.success('创建角色成功')
    }

    emit('success')
  } catch (error) {
    if (error !== false) {
      ElMessage.error(isEdit.value ? '更新角色失败' : '创建角色失败')
    }
  } finally {
    loading.value = false
  }
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  resetForm()
}

// 监听可分配权限选择状态，自动更新全选状态
watch(
  () => selectedAvailable.value,
  (newSelected) => {
    const availableCount = filteredAvailablePermissions.value.length
    availableSelectAll.value = newSelected.length === availableCount && availableCount > 0
  }
)

// 监听已分配权限选择状态，自动更新全选状态
watch(
  () => selectedAssigned.value,
  (newSelected) => {
    const assignedCount = filteredAssignedPermissions.value.length
    assignedSelectAll.value = newSelected.length === assignedCount && assignedCount > 0
  }
)

// 监听搜索文本变化，重置选择状态
watch(
  () => availableSearchText.value,
  () => {
    selectedAvailable.value = []
    availableSelectAll.value = false
  }
)

watch(
  () => assignedSearchText.value,
  () => {
    selectedAssigned.value = []
    assignedSelectAll.value = false
  }
)

// 监听弹窗显示状态，每次打开时重新获取权限数据
watch(
  () => props.visible,
  (newVisible) => {
    if (newVisible) {
      fetchPermissions()
    }
  }
)

// 初始化
onMounted(() => {
  fetchPermissions()
})
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}

/* 权限配置表单项样式 */
.permission-transfer-item {
  margin-bottom: 20px;
}

.permission-transfer-item :deep(.el-form-item__content) {
  width: 100%;
  display: block;
}

/* 自定义穿梭框容器 */
.permission-transfer-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 穿梭框面板包装器 */
.transfer-panel-wrapper {
  width: 100%;
}

.transfer-panel-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
  padding-left: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.select-all-checkbox {
  font-size: 12px;
  font-weight: normal;
}

.select-all-checkbox :deep(.el-checkbox__label) {
  font-size: 12px;
  color: #606266;
}

/* 穿梭框面板 */
.transfer-panel {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
}

/* 搜索框 */
.transfer-filter {
  margin: 12px;
  width: calc(100% - 24px);
}

/* 权限列表 */
.transfer-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px 12px;
  border-bottom: 1px solid #ebeef5;
}

.permission-checkbox-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 权限项 */
.permission-item {
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.permission-item:hover {
  background-color: #f5f7fa;
}

.permission-item.is-child {
  margin-left: 0;
}

/* 权限内容容器 */
.permission-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.permission-checkbox {
  flex: 1;
  margin-right: 0;
}

/* 权限分配复选框（主要功能） */
.permission-assignment-checkbox {
  flex: 1;
  margin-right: 0;
}

/* 批量操作复选框（辅助功能） */
.permission-batch-checkbox {
  flex-shrink: 0;
  margin-left: 8px;
  margin-right: 4px;
}

.permission-batch-checkbox :deep(.el-checkbox__input) {
  transform: scale(0.8);
}

.permission-batch-checkbox :deep(.el-checkbox__inner) {
  border-color: #dcdfe6;
  background-color: #f5f7fa;
}

.permission-batch-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.permission-item :deep(.el-checkbox) {
  width: 100%;
  margin-right: 0;
}

.permission-item :deep(.el-checkbox__label) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 8px;
  line-height: 1.4;
}

/* 全选子级按钮 */
.select-children-btn {
  flex-shrink: 0;
  padding: 4px 6px;
  margin-left: 8px;
  border-radius: 4px;
  opacity: 0;
  transition: all 0.2s;
  color: #606266;
  background: transparent;
  border: 1px solid transparent;
}

.permission-item:hover .select-children-btn {
  opacity: 1;
}

.select-children-btn:hover {
  background-color: #f0f9ff;
  border-color: #3b82f6;
  color: #3b82f6;
}

.select-children-btn:active {
  background-color: #dbeafe;
}

.select-children-btn :deep(.el-icon) {
  font-size: 14px;
}

.permission-name {
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}

.permission-path {
  font-size: 12px;
  margin-top: 2px;
  word-break: break-all;
  transition: color 0.2s;
}

/* 权限层级颜色 */
/* 一级权限（根级） - 深蓝色 */
.level-0 {
  color: #1f2937 !important;
  font-weight: 600;
}

.level-0-path {
  color: #4b5563 !important;
}

/* 二级权限 - 蓝色 */
.level-1 {
  color: #2563eb !important;
  font-weight: 500;
}

.level-1-path {
  color: #60a5fa !important;
}

/* 三级权限 - 绿色 */
.level-2 {
  color: #059669 !important;
  font-weight: 500;
}

.level-2-path {
  color: #34d399 !important;
}

/* 四级权限 - 橙色 */
.level-3 {
  color: #d97706 !important;
  font-weight: 500;
}

.level-3-path {
  color: #fbbf24 !important;
}

/* 五级权限 - 紫色 */
.level-4 {
  color: #7c3aed !important;
  font-weight: 500;
}

.level-4-path {
  color: #a78bfa !important;
}

/* 六级及以上权限 - 红色 */
.level-5,
.level-6,
.level-7,
.level-8,
.level-9 {
  color: #dc2626 !important;
  font-weight: 500;
}

.level-5-path,
.level-6-path,
.level-7-path,
.level-8-path,
.level-9-path {
  color: #f87171 !important;
}

/* 底部操作区 */
.transfer-footer {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f7fa;
  border-top: 1px solid #ebeef5;
}

.transfer-count {
  font-size: 12px;
  color: #909399;
}

/* 响应式设计 */
@media (min-width: 768px) {
  .permission-transfer-container {
    flex-direction: row;
    gap: 24px;
  }

  .transfer-panel-wrapper {
    flex: 1;
    min-width: 0;
  }
}
</style>
